<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>问卷预览</title>
	<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
	<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
	<script type="text/javascript" src="../../lib/vue/vue.js"></script>
	<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
	<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
	<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
	<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/webApi.js"></script>
	<script type="text/javascript" src="../../static/js/tool.js"></script>
	<style type="text/css">
		/*
		        找到html标签、body标签，和挂载的标签
		        都给他们统一设置样式
		    */
		html,
		body,
		#app,
		.el-container {
			/*设置内部填充为0，几个布局元素之间没有间距*/
			padding: 0px;
			/*外部间距也是如此设置*/
			margin: 0px;
			/*统一设置高度为100%*/
			height: 100%;
		}

		.el-main {
			padding: 4px;
		}

		[v-cloak] {
			display: none !important;
		}
	</style>
</head>

<body>
	<el-container id="app">
		<el-main>
			<div v-cloak style="margin: 10px 50px;border: 1px solid #e8eaec;background-color: #FFFFFF;">
				<div style="text-align:center;font-size:30px;">{{title}}</div>
				<div style="text-align:center;font-size:20px">当前已出总题目数量：{{tltleLength}}</div>
				<div style="font-size:16px;margin-left:10%;">
					<div v-for="(item,index) in titleList" :key="index" style="margin: 20px 0;">
						<div>{{index+1}}、{{item.question_name}}</div>
						<img v-if="item.question_img" :src="item.question_img" width="200px" height="200px"
							style="border: #000000 1px solid;" />
						<div v-for="(choose,chooseIndex) in item.answers" :key="chooseIndex">
							<div v-if="item.question_class == 1">
								<el-radio-group v-model="item.choose">
									<el-radio :label="choose.answer_name" :key="choose.answer_id">{{choose.answer_name}}
									</el-radio>
								</el-radio-group>
							</div>
							<div v-if="item.question_class == 2">
								<el-checkbox-group v-model="item.choose">
									<el-checkbox :label="choose.answer_name" :key="choose.answer_id">
										{{choose.answer_name}}</el-checkbox>
								</el-checkbox-group>
							</div>
							<div v-if="item.question_class == 3">
								<el-checkbox-group v-model="item.choose">
									<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
										placeholder="请输入您的意见" v-model="formData.name" style="width: 400px;">
									</el-input>
								</el-checkbox-group>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-main>
	</el-container>
</body>

<script type="text/javascript">
	window.onload = function () {
		var main = {
			data() {
				return {
					title: null,
					tltleLength: null,
					titleList: [],
					formData: {
						name: ''
					}
				}
			},
			created() {
				this.editExamPaper(Tool.getParam("id"))
				this.title = decodeURIComponent(Tool.getParam('name'))
			},
			mounted() {

			},
			methods: {
				editExamPaper(id) {
					let that = this;
					XEAjax.post(`${curl}/wenjuan/editExamPaper?id=` + id, {

					}).then(res => {
						if (res.code == 200) {
							that.$message({
								message: res.msg,
								type: 'success'
							})
							let data = {}
							let arr = Object.keys(res.data)
							if (arr.length) {
								that.title = res.data[0].paper_name
								let list = res.data
								for (let i in list) {
									list[i].question_class == 1 || list[i].question_class == 3 ? list[i]['choose'] = null : list[i]['choose'] = []
								}
								that.titleList = []
								that.titleList = list
								that.tltleLength = this.titleList.length
							} else {
								that.titleList = []
								that.tltleLength = 0
							}
						} else {
							that.$message({
								message: res.msg,
								type: 'error'
							})
						}
					});
				},
			}
		};
		var vue = Vue.extend(main);
		new vue().$mount('#app');
	}
</script>

</html>